import styled from "@emotion/styled"
import { PageHeader } from "../../AccountPage/components/PageHeader"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useAtom } from "jotai"
import { feedbackAtom, errorAtom, isFocusedAtom, currentLengthAtom } from "../atom"
import { SvgComponent } from "@/components/base/Svg"

const FeedbackContainer = styled.div`
    width: 375rem;
    height: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
`
const FeedbackContent = styled.div`
    width: 343rem;
    height: 20rem;
    line-height: 20rem;
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 14rem;
    margin: 16rem 16rem 8rem;
`
interface TextAreaContainer {
    isFocused?: boolean
    currentLength?: number
    disabled?: boolean
}
const TextAreaContainer = styled.div<TextAreaContainer>`
    width: 343rem;
    height: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "668rem" : "288rem")};
    border: ${({ isFocused, currentLength }) =>
        (currentLength ?? 0) > 1000
            ? "1px solid #F51450"
            : isFocused
              ? "1px solid #007bff"
              : "1px solid #F5F5F5"};
    border-radius: 6rem;
    background-color: #ffffff;
    position: relative;
    margin: 0 auto;
    overflow-y: hidden;
`

const TextArea = styled.textarea<TextAreaContainer>`
    width: 313rem;
    height: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "642rem" : "262rem")};
    padding: 12rem 14rem;
    border: none;
    outline: none;
    resize: none;
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 16rem;
    margin: 0 auto;
    overflow-y: hidden;
    background-color: ${({ isFocused, currentLength }) =>
        (currentLength ?? 0) > 1000 ? "#FEE2E9" : isFocused ? "#ffffff" : "#F5F5F5"};
    &::placeholder {
        color: #aaaaaa;
    }
`

const CharCount = styled.div`
    position: absolute;
    bottom: 10rem;
    right: 10rem;
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 10rem;
`
const ErrorLine = styled.div`
    display: flex;
    align-items: center;
    width: 343rem;
    margin: 8rem auto;
`
const ErrorIcon = styled(SvgComponent("pages/UserCenterPage/error_msg.svg"))`
    width: 16rem;
    height: 16rem;
    margin-right: 4rem;
`
const ErrorMessage = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 12rem;
`

const SubmitButton = styled(ButtonRegular)<TextAreaContainer>`
    background: ${({ disabled }) =>
        disabled
            ? "linear-gradient(90deg, #FFADC2 0%, #FFADEB 100%)"
            : "linear-gradient(90deg, #FF3568 10%, #FF33CC 100%)"};
    width: 343rem;
    height: 40rem;
    line-height: 40rem;
    font-family: "SF Pro Text";
    font-weight: 500;
    font-size: 16rem;
    text-align: center;
    color: ${({ disabled }) => (disabled ? "rgba(255, 255, 255, 0.3)" : "#ffffff")};
    position: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "relative" : "absolute")};
    left: 50%;
    margin-left: -171.5rem;
    margin-top: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "32rem" : "0")};
    margin-bottom: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "40rem" : "0")};
    bottom: ${({ currentLength }) => ((currentLength ?? 0) > 391 ? "0" : "40rem")};
`

export default function FeedbackPage() {
    const [feedback, setFeedback] = useAtom(feedbackAtom)
    const [error, setError] = useAtom(errorAtom)
    const [isFocused, setIsFocused] = useAtom(isFocusedAtom)
    const [currentLength, setCurrentLength] = useAtom(currentLengthAtom)

    const maxLength = 1000

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const value = e.target.value
        console.log(value.length)
        setCurrentLength(value.length)
        if (value.length <= maxLength) {
            setFeedback(value)
            setError(null)
        } else {
            setError("The maximum number of characters exceeds the limit")
            setFeedback(value.slice(0, maxLength))
        }
    }

    const handleSubmit = () => {
        if (feedback.trim()) {
            console.log("Submitting feedback:", feedback)
            setFeedback("")
            setError(null)
            setCurrentLength(0)
            setIsFocused(false) // 提交后取消焦点状态
        }
    }

    return (
        <FeedbackContainer>
            <PageHeader
                title="Feedback"
                backPath="/my"
                iconType="black-arrow"
                textColor="#131416"
                backgroundColor="#FFFFFF"
            />
            <FeedbackContent>Feedback Content</FeedbackContent>

            <TextAreaContainer
                isFocused={isFocused}
                currentLength={currentLength}
            >
                <TextArea
                    value={feedback}
                    isFocused={isFocused}
                    currentLength={currentLength}
                    onChange={handleChange}
                    onFocus={() => setIsFocused(true)}
                    onBlur={() => setIsFocused(false)}
                    placeholder="Your suggestion matters. What can we improve on?"
                />
                <CharCount>
                    {feedback.length}/{maxLength}
                </CharCount>
            </TextAreaContainer>
            {error && (
                <ErrorLine>
                    <ErrorIcon />
                    <ErrorMessage>{error}</ErrorMessage>
                </ErrorLine>
            )}
            <SubmitButton
                disabled={!feedback.trim()}
                currentLength={currentLength}
                onClick={handleSubmit}
            >
                Submit
            </SubmitButton>
        </FeedbackContainer>
    )
}
